<template>
  <div>
    <div class="details_box" v-loading="loading" v-if="valueId == 0">
      <div style="width: 100%; height: 40px;">
        <el-button type="warning" size="small" link style="float: right; margin-top: 10px; margin-left: 10px;"
          @click="reback()">返回</el-button>
        <el-button type="success" :disabled="!htmlPdUrl" size="small" link style="float: right; margin-top: 10px; margin-left: 10px;"
          @click="downlaodPdf()">下载报告</el-button>
      </div>
      <div class="sapmle_box">
        <div style="height: 40px;">
          <div style="display: flex;">
            <span style="display: flex;">用户名：
              <h3> {{ checkedSampleReport.userName ? checkedSampleReport.userName : '-' }}</h3>
            </span>
            <span style="margin-left: 30px;display: flex;">电话号码：
              <h3> {{ checkedSampleReport.phone ? checkedSampleReport.phone : '-' }}</h3>
            </span>
          </div>
        </div>
        <div class="ifram_height">
          <div style="float: left; width: 40%; overflow: auto; height: 90%;">
            <el-descriptions title="问卷回答信息" :column="1">
              <el-descriptions-item :key="item.key" v-for="item in checkedSampleReport.answerJsonList" :label="item.key">{{
                item.val }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="float: left; width: 60%; overflow: hidden; height: 90%;">
            <iframe id="iframeDiv" width="100%" height="94%" frameborder="no" allowtransparency="true"
              :src="htmlPdUrl"></iframe>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <el-button type="info" @click="auditSamplePro">存在问题</el-button>
        <el-button type="primary" @click="auditSample(0)">审核通过</el-button>
      </div>
    </div>
    <div class="details_box" v-loading="loading" v-if="valueId == 1">
      <div style="width: 100%; height: 40px;">
        <el-button type="warning" size="small" link style="float: right; margin-top: 10px; margin-left: 10px;"
          @click="reback()">返回</el-button>
        <el-button type="success" :disabled="!htmlPdUrl" size="small" link style="float: right; margin-top: 10px; margin-left: 10px;"
          @click="downlaodPdf()">下载报告</el-button>
      </div>
      <div class="sapmle_box_view">
        <div style="height: 40px;">
          <div style="display: flex;">
            <span style="display: flex;">用户名：
              <h3> {{ checkedSampleReport.userName }}</h3>
            </span>
            <span style="margin-left: 30px;display: flex;">电话号码：
              <h3> {{ checkedSampleReport.phone ? checkedSampleReport.phone : '暂无数据' }}</h3>
            </span>
          </div>
        </div>
        <div class="ifram_height_view">
          <div style="float: left; width: 40%; overflow: auto; height: 90%;">
            <el-descriptions title="问卷回答信息" :column="1">
              <el-descriptions-item :key="item.key" v-for="item in checkedSampleReport.answerJsonList" :label="item.key">{{
                item.val }}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="float: left; width: 60%; overflow: hidden; height: 100%;">
            <iframe id="iframeDiv" width="100%" height="100%" frameborder="no" allowtransparency="true"
              :src="htmlPdUrl"></iframe>
          </div>
        </div>
      </div>
    </div>
    <!-- 问题描述 -->
    <el-dialog :visible.sync="auditPass" title="" width="950px">
      <el-form ref="form" label-width="100px">
        <el-form-item label="问题描述" prop="auditResult">
          <el-input v-model="auditFormData.auditResult" type="textarea" :autosize="{ minRows: 4 }"
            placeholder="请输入问题描述" />
        </el-form-item>
      </el-form>
      <el-button type="warning" @click="auditSample(1)" style="float: right;margin-top: 4%;">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import reportSampleApi from '@/api/report/reportSample';

import seqSampleReportApi from '@/api/sequence/seqSampleReport';
export default {
  name: '',
  props: {
    checkedSampleReport: {
      type: Object,
      default: {},
    },
    valueId: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      auditPass: false,
      htmlPdUrl: '',
      auditFormData: {},
      loading: false,
    }
  },
  created() {
    // console.log(this.valueId);
    // console.log(this.checkedSample);
    this.getData();
  },
  methods: {
    downlaodPdf () {
      const a = document.createElement("a");
      a.href = this.htmlPdUrl;
      a.download = this.checkedSampleReport.userName + '+肠道菌群检测+' + this.checkedSampleReport.number + '.pdf';
      document.body.appendChild(a); //追加a标签
      a.click(); //a标签点击
      document.body.removeChild(a); //移除节点
    },
    // 返回
    reback() {
      this.$emit("close");
    },
    // 公共loading
    customLoading() {
      var loading = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      return loading;
    },
    auditSamplePro() {
      this.auditPass = true;
    },
    auditSample(v) {
      let auditPass = this.auditPass;
      if (v == 1) {
        auditPass = false; //存在问题
      } else {
        auditPass = true; // 审核通过
      }
      var loading = this.customLoading();
      seqSampleReportApi.auditSample({
        id: this.checkedSampleReport.id,
        auditPass: auditPass,
        auditResult: this.auditFormData.auditResult,
      }).then(res => {
        loading.close();
        this.$message({ message: '样本审核完成！', type: 'success' });
        this.$emit("close");
        this.$parent.handleQuery();
      }).catch();
    },
    getData() {
      this.loading = true;
      seqSampleReportApi.downloadReport(this.checkedSampleReport.id).then((res) => {
        const binaryData = [];
        binaryData.push(res);
        let blob = new Blob(binaryData, { type: 'application/pdf' });
        this.htmlPdUrl = window.URL.createObjectURL(blob) + '#toolbar=0&navpanes=0&scrollbar=0';

        let file = new window.File([blob], 'xxx.pdf', { type: blob.type })
        console.log(file)

        let reader = new FileReader();
        reader.addEventListener('load', (e) => {
          let base64 = e.target.result;
          let b = new Blob([base64], { type: file.type });
          console.log(b)
          let h = window.URL.createObjectURL(b);
          console.log(h)
        })
        let aa = reader.readAsDataURL(file);

        // this.auditPass = true;
        // this.$set(this.auditDialog, 'visible', true);
        // this.$set(this.auditDialog, 'title', '审核报告样本');
        // this.checkedSample = row;
        let answerJson = this.checkedSampleReport.answerJson;
        if (answerJson) {
          answerJson = JSON.parse(answerJson)
          let answerJsonList = []
          for (let k in answerJson) {
            answerJsonList.push({
              key: k,
              val: answerJson[k]
            })
          }
          this.checkedSampleReport.answerJsonList = answerJsonList;
        }
        this.loading = false;
      });
    },
  },
  mounted() {

  }
}
</script>

<style scoped>
.details_box {
  width: 100%;
  padding: 0 2%;
  background-color: white;
}

.sapmle_box {
  width: 100%;
  height: calc(100vh - 220px);
  margin-bottom: 10px;
}

.sapmle_box_view {
  width: 100%;
  height: calc(100vh - 160px);
  /* margin-bottom: 10px; */
}


.ifram_height {
  width: 100%;
  height: calc(100vh - 240px);
}

.ifram_height_view {
  width: 100%;
  height: calc(100vh - 210px);
}

.dialog-footer {
  padding-bottom: 10px;
  text-align: end;
}</style>
